<!doctype html>
<html>
<head>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta charset="UTF-8">
	<meta name="Keywords" content="">
	<meta name="Description" content="">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-sclae=1.0,user-scalable=0">
	<title>XuLuo</title>
	<script type="text/javascript" src="js/zepto.min.js"></script>
	<style>
		*{margin:0;padding:0;list-style:none;}
		.box{width: 65%;max-width: 300px;margin: 50px auto;}
		.range{position:relative;width:80%;margin:0 auto;text-align:right;}
		.range input[type='range']{width:100%;height:6px;border:0;border-radius:2px;background-color:#ddd;outline:none;-webkit-appearance:none!important;}
		.range .line{width:0px;height:6px;position:absolute;border-radius:2px;left:0px;top:11px;z-index:900;background:#d21a1a;}
		.range input[type='range']::-webkit-slider-thumb{width:20px;height:20px;border-radius:50%;background-color:#03a9f4;-webkit-appearance:none!important;position:relative;z-index:1000;}
		.range .range-tip{font-size:15px;position:absolute;z-index:999;top:-24px;width:40px;line-height:20px;text-align:center;color:#666666;border:1px solid #dddddd;border-radius:4px;background-color:#ffffff;}
		.range .range-tip.hide{display:none;}
	</style>
</head>
<body>
	<p style="margin-top: 20px;text-align: center;">带有提示的滑块：<span id="value-1"></span></p>
	<div class="range" style="margin-top:50px;">
		<input type="range" value="40" max="100" min="10" step="10" id="range" />
		<div class="line"></div>
	</div>
	<script>
		var xl_Range = function(params,callback) {
			this.init(params,callback);
			this.time=null;
			var distance,offsetLeft,tooltipWidth;
		};
		xl_Range.prototype = {
			init: function(params,callback) {
				var self = this;
	            sliderWidth=20;//圆块宽度
	            //tip框默认left值与圆块对齐，使其对齐圆块中心:
	            tipDefaultLeft=21-sliderWidth/2;//tip总宽减去圆块半宽
	            distance = Math.abs(params.element.max - params.element.min);
	            params.element.style.width=params.element.parentNode.offsetWidth*(1-params.element.min/params.element.max)+'px';
	            offsetLeft = params.element.offsetLeft;
	            tooltipWidth = params.element.offsetWidth-sliderWidth;
	            params.element.insertAdjacentHTML('afterend','<div class="range-tip hide">'+params.element.value+'</div>');
	            var scaleWidth = (tooltipWidth / distance) * Math.abs(params.element.value - params.element.min);
	            params.element.nextSibling.style.left = (offsetLeft + scaleWidth-tipDefaultLeft)+'px';
	            self.showTip(params.element,callback);
	            params.element.addEventListener("input",function(){
	            	self.showTip(params.element,callback);
	            });
	            params.element.addEventListener("touchmove",function(){
	            	self.showTip(params.element,callback);
	            });
	            params.element.addEventListener("touchend",function(){
	            	self.hideTip(params.element);
	            });
	        },
	        showTip: function(el,callback){
	        	el.nextSibling.classList.remove("hide");
	        	var scaleWidth = (tooltipWidth / distance) * Math.abs(el.value - el.min);
	        	el.nextSibling.style.left = (offsetLeft + scaleWidth-tipDefaultLeft)+'px';
	        	el.nextSibling.nextElementSibling.style.width=offsetLeft + scaleWidth+sliderWidth/2+'px';
	        	el.nextSibling.innerText=el.value;
	        	callback({
	        		value:el.value
	        	});
	        },
	        hideTip : function(el){
	        	if (this.time) {
	        		clearTimeout(this.time);
	        	}
	        	this.time = setTimeout(function() {
	        		el.nextSibling.classList.add("hide");
	        	}, 1500);
	        }
	    };
	    // 第一种，input滑块
		var range = new xl_Range({
			element:document.getElementById("range")
		},function(data){
			document.getElementById("value-1").textContent = data.value;
		});
	</script>
	<!-- 第二种 -->
	<style>
		.slider{width: 92%; height: 6px; margin: 0 auto; position: relative; text-align: right;}
		.slider .input{width:100%; height:100%; border:0; border-radius: 2px; background-color:#ddd; display: block; }
		.slider .tip{width:100px;height:25px;line-height:25px; background-size: 100% auto; background-image: url(images/range-bg.png); position: absolute; text-align: center; top: -9.5px; font-size: 14px; z-index: 0; }
		.slider .line{width:0px; height:100%; position:absolute; border-radius: 2px; top:0px; left:0px; z-index:900; background:#d21a1a;
		}
	</style>
	<div class="slider" style="margin-top: 40px;"></div>
	<script>
		function slider(obj){
			var slider=document.querySelector(obj.ele),startX,
			value=obj.value,max=obj.max,min=obj.min,step=obj.step,
			sliderWidth=slider.offsetWidth,dragWidth=obj.dragWidth,
			tipLeft=(sliderWidth-dragWidth)*value/max,
			input=document.createElement('input'),
			tip=document.createElement('div'),
			line=document.createElement('div');
			input.className='input',slider.appendChild(input),
			tip.className='tip',slider.appendChild(tip),
			line.className='line',slider.appendChild(line);
			
			function setValue(tipLeft,value){
				line.style.width=tipLeft+'px';
				tip.innerHTML=value;
				tip.style.transform='translate3d('+tipLeft+'px,0,0)';
			}
			setValue(tipLeft,value)

			tip.addEventListener('touchstart',function(e){
				startX = e.changedTouches[0].pageX-tipLeft
			})
			tip.addEventListener('touchmove',function(e){
				var moveX = e.changedTouches[0].pageX,
				moveLeft = moveX-startX,
				maxLeft=sliderWidth-dragWidth,
				minLeft=maxLeft*min/max;
				if(moveLeft>=maxLeft)moveLeft=maxLeft
				if(moveLeft<=minLeft)moveLeft=minLeft
				tipLeft=moveLeft
				var currValue=moveLeft/(sliderWidth-dragWidth)*max
				if(currValue>=value+step)value=value+step
				if(currValue<=value-step)value=value-step
				if(currValue>=max)value=max
				if(currValue<=min)value=min
				setValue(tipLeft,value)
		      	e.preventDefault()
		    })
		}
		slider({
			ele:'.slider',
			value:300,
			max:2000,
			min:100,
			step:200,
			dragWidth:100
		})
	</script>
</body>
</html>